<template>
  <Card
    shadow
    style="width:360px"
  >
    <p slot="title">
      <Icon type="ios-contact-outline" />
      个人信息
    </p>
    <div>
      <Row style="line-height:36px;">
        <Col span="6">
        用户名：
        </Col>
        <Col span="18">
        {{userName}}
        </Col>
      </Row>
      <Row style="line-height:36px;">
        <Col span="6">
        邮箱：
        </Col>
        <Col span="18">
        {{email}}
        </Col>
      </Row>
      <Row style="line-height:36px;">
        <Col span="6">
        电话：
        </Col>
        <Col span="18">
        {{mobile}}
        </Col>
      </Row>
      <Row style="line-height:36px;">
        <Col span="6">
        所属部门：
        </Col>
        <Col span="18">
        {{deptName}}
        </Col>
      </Row>
    </div>
  </Card>
</template>

<script>
import { mapState } from "vuex";

export default {
  name: "personal",
  data() {
    return {};
  },
  computed: {
    ...mapState({
      userName: state => state.user.userName,
      email: state => state.user.email,
      mobile: state => state.user.mobile,
      deptName: state => state.user.deptName
    })
  },
  methods: {},
  mounted() {}
};
</script>

<style lang="less">
</style>
